<template>
	<view class="main">
		<!-- <u-navbar placeholder title=" " leftIconColor="#FFFFFF" bgColor="transparent" @leftClick="back"></u-navbar> -->
		<view class="header">
			<view class="header-title">
				合成条件:
				<!-- <image src="@/static/images/fusion/header-title.png" mode=""></image> -->
			</view>
			<view class="header-des">
				<u-icon name="error-circle"></u-icon>
				<!-- <text>合成名称=汤恩伯荔波 x3 + 卡巴卡 x1</text> -->
				<view class="mergeRule">
					<!-- detail.rule.length > 1 -->
					<text class="mergeName">{{special_info.title}} =</text>
					<text class="ruleItem" v-for="(item, index) in detail.rule" :key="index">{{item.title}} x{{item.goods_num}} <text v-if="index + 1 !== detail.rule.length">+</text></text>
				</view>
			</view>
		</view>
		<!-- -------------------------- -->
		<view v-if="false" class="goods">
			<view class="goods-box">
				<view class="goods-box-image">
					<image :src="special_info.thumb" mode="aspectFill"></image>
				</view>
			</view>
			<view class="goods-scenic">
				<view class="goods-scenic-top">
					<view class="goods-scenic-top-bg">
						<!-- <image src="@/static/images/fusion/title-left.png" mode=""></image> -->
					</view>
					<view class="goods-scenic-top-title">
						{{special_info.title}}
					</view>
					<view class="goods-scenic-top-bg">
						<!-- <image src="@/static/images/fusion/title-right.png" mode=""></image> -->
					</view>
				</view>
				<view class="goods-scenic-tags">
					<text class="title">限量</text>
					<text>{{special_info.all_count}}份</text>
					<!-- <text>精灵圣域-眼</text> -->
				</view>
				<u-button :disabled="detail.hit_num<1" class="goods-scenic-submit" @click="submit">合成藏品</u-button>
				<view class="goods-scenic-tips">当前可合成{{detail.hit_num||0}}次</view>
			</view>
		</view>
		<view v-if="false" class="goods_cont">
			<view class="goods_cont-title">
				合成所需藏品
			</view>
			<view class="goods_cont-cont">
				<u-grid :border="false">
					<u-grid-item v-for="item in detail.rule" :key="item.id">
						<view class="goods_cont-cont-item">
							<view class="goods_cont-cont-item-image">
								<u--image :src="item.thumb" :fade="true" duration="450" width='200rpx' height="200rpx"
									radius="20rpx" :lazy-load="true" mode="aspectFill">
									<template v-slot:loading>
										<u-loading-icon color="#468EFF"></u-loading-icon>
									</template>
								</u--image>
								<!-- <image :src="item.thumb" mode="aspectFill"></image> -->
								<view class="number">{{item.have_goods_num}}/{{item.goods_num}}</view>
							</view>
							<view class="goods_cont-cont-item-title u-line-1">
								{{item.title}}
							</view>
						</view>
					</u-grid-item>
				</u-grid>

			</view>
		</view>
		<view v-if="false" class="rule">
			<view class="rule-title">活动规则</view>
			<view class="rule-cont">
				<u-parse :content="detail.detail"></u-parse>
			</view>
		</view>
		<!-- --------------------------------- -->
		
		<view class="content">
			<view class="item" v-for="(item, index) in ruleList.rule" :key="index">
				<view class="top">
					<view class="needCollection">{{item.title}} x{{item.goods_num}}</view>
					<view class="selectCollection" v-if="!item.selectList"
						@click="changeSelect(item)">选择藏品</view>
				</view>
				<view class="footer">
					<view class="footer-item" v-for="l in item.selectList" :key="l.goods_id">
						<view class="img">
							<image :src="l.thumb" mode=""></image>
						</view>
						<view class="info">
							<view class="title">{{l.title}}</view>
							<view class="iden">
								<text>{{l.goodsCode}}/</text>
								<text>{{l.allCount}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="ntabar savepadding savebottom" >
			
			<view class="number">
				<text class="title">已选择：</text>
				<text class="count">{{ selectCount }}</text>
				<text>个</text>
			</view>
			<view class="btn">
				<view class="item" @click="submit">
					<text>确认合成</text>
					<text>→</text>
				</view>
			</view>
		</view>
		
		
		<u-popup :show="selectShow" @close="selectShow = false" >
			<view class="selectBox">
				<view class="header">
					<view class="header-des">
						<view class="img">
							<image :src="thumb" mode=""></image>
						</view>
						<view class="info">
							<view class="title">
								请选择{{title}} x {{num}}
							</view>
							<view class="tips">在售商品不可参与合成活动</view>
						</view>
					</view>
				</view>
				<view class="content">
					<u-checkbox-group
						v-model="selectId"
						placement="column"
						@change="selectSpecialId"
						>
						<view class="item" v-for="(item, index) in list" :key="item.goods_id">
							<view class="left">
								<view class="code">
									#{{item.goodsCode}}/{{item.allCount}}
								</view>
								<view class="iden">
									链上标识{{item.chain_mark}}
								</view>
							</view>
							<view class="right">
								<view class="price">
									<text>{{ item.price }}</text>
									<text>售价</text>
								</view>
								<u-checkbox activeColor="#000" shape="circle" :name="item.goods_id"></u-checkbox>
							</view>
						</view>
					</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="ntabar savepadding savebottom" >
					<view class="number">
						<text class="title">已选择：</text>
						<text class="count">{{ selectId.length }} </text>
						<text> 个</text>
					</view>
					<view class="btn">
						<view class="item" :class="{ unchecked:selectId.length === 0 }" @click="submitSelect">
							<text>确认选择</text>
							<text>→</text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-popup :show="pwd_show" overlayOpacity="0.8" mode="center" bgColor="#fff"
			@close="pwd_show=false,password=''">
			<view class="material">
				<!-- <view class="pwd-header">
					<view class="material-header-close" @click="pwd_show=false,password=''">
						<u-icon name="close" color="#BFBFCA" size="18"></u-icon>
					</view>
				</view> -->
				<view class="pwd-header-title">请输入操作密码</view>
				<view class="material-cont pwd-cont">
					<PasswordInput v-model="password" @confirm="confirmPwd"></PasswordInput>
				</view>
			</view>
		</u-popup>
		<u-popup :show="prize_show" overlayOpacity="0.8" mode="center" bgColor="transparent" @close="prize_show=false">
			<view class="prize">
				<view class="prize-close" @click="prize_show=false">
					<u-icon name="close" color="#BFBFCA" size="18"></u-icon>
				</view>
				<view class="prize-title">恭喜获得</view>
				<view class="prize-goods">
					<image :src="special_info.thumb" mode="aspectFill"></image>
				</view>
				<view class="prize-goods-title">{{special_info.title}}</view>
				<button class="prize-submit" @click="prize_show=false">完成</button>
			</view>
		</u-popup>
		<u-modal :show="tshow" @confirm="GoPle" asyncClose content="您还未设置交易密码？" @cancel="tshow=false" title="提示"
			cancelColor="#A2A2A2" confirmColor="#00000" confirm-text="去设置" show-cancel-button></u-modal>
	</view>
</template>

<script>
	import {
		mixin
	} from '@/Mixins/mixin.js'
	import PasswordInput from "@/components/PasswordInput.vue"
	export default {
		mixins: [mixin],
		components: {
			PasswordInput
		},
		data() {
			return {
				days: 0,
				hours: 0,
				minutes: 0,
				seconds: 0,
				detail: {},
				special_info: {},
				pwd_show: false, //是否显示密码输入框
				prize_show: false, //是否显示结果弹窗
				password: '',
				tshow: false,
				selectShow: false,
				pages: 1,
				selectId: [], // 选中的id
				selectList: [], // 选中的list
				ruleList: {
					rule: []
				}, // 合成规则列表
				purchaselist: [], // 所有藏品
				totals: '',
				list: [] ,// 所有未交易的藏品
				thumb: '' ,// 图片封面
				title: '',
				num: 0,
				id: '' ,// 选中的id
				selectCount: 0
			};
		},
		onLoad(e) {
			this.options = e
		},
		onShow() {
			this.cominfo(this.options.id)
		},
		// There are many problems in this area, and the design drawing needs to be changed
		methods: {
			submitSelect () {
				if (this.selectId.length !== this.num) return this.$u.toast('请选择所需数量')
				const selectList = this.selectId.map(id => this.purchaselist.filter(item => item.goods_id === id)[0])
				this.ruleList.rule.forEach(item => {
					// console.log(item);
					if (item.id === this.id) {
						item.selectId = this.selectId
						item.selectList = selectList
						item.count = this.selectId.length
					}
				})
				let selectCount = 0
				this.ruleList.rule.forEach(item => {
					if (item.count) {
						selectCount += item.count
					}
				})
				this.selectCount = selectCount
				this.selectShow = false
			},
			selectSpecialId (e) {
				this.selectId = e
			},
			changeSelect (item) {
				this.selectId = []
				if (item.selectId?.length > 0) {
					this.selectId = item.selectId
					console.log(item.selectId);
				}
				this.thumb = item.thumb
				this.title = item.title
				this.num = item.goods_num * 1
				this.id = item.id
				this.selectShow = true
				this.getmylist(item.id)
			},
			// 我拥有的列表
			async getmylist(id) {
				let data = await this.$http({
					url: this.$api.myShowList,
					method: 'get',
					hideLoading: true,
					data: {
						page: this.pages,
						page_size: 10,
						special_id: id,
						type: 2,
						sell_status: '1'
					}
				})
				let list = data.data.data
				if (data.code == 200) {
					if (this.pages == 1) {
						this.purchaselist = []
					}
					this.purchaselist = this.purchaselist.concat(list);
					this.totals = data.data.total
					this.list = this.purchaselist.filter(item => item.sell_status !== 1)
				}
			},
			//合成详情
			async cominfo(id) {
				let res = await this.$http({
					url: this.$api.cominfo,
					method: 'GET',
					hideLoading: true,
					needToken: true,
					data: {
						id: id
					}
				})
				if (res.code == 200) {
					this.detail = res.data
					this.ruleList.rule = res.data.rule
					this.special_info = res.data.special_info
				} else {
					uni.$u.toast(res.msg)
				}
			},
			onChange(e) {
				this.days = e.days < 10 ? '0' + e.days : e.days
				this.hours = e.hours < 10 ? '0' + e.hours : e.hours
				this.minutes = e.minutes < 10 ? '0' + e.minutes : e.minutes
				this.seconds = e.seconds < 10 ? '0' + e.seconds : e.seconds
			},
			confirmPwd(e) {
				console.log('[输入完成]', e)
				this.comactive()
			},
			//合成
			async comactive() {
				let res = await this.$http({
					url: this.$api.comactive,
					method: 'POST',
					hideLoading: true,
					needToken: true,
					data: {
						id: this.options.id,
						buy_passwd: this.password
					}
				})
				this.pwd_show = false
				this.password = ''
				console.log('[合成詳情]', res)
				if (res.code == 200) {
					// this.prize_show = true
					// this.cominfo(this.options.id)
					uni.navigateTo({
						url: '/pages/fusion/success?id=' + this.options.id
					})
				} else {
					uni.$u.toast(res.msg)
				}
			},
			async submit() {
				console.log(this.ruleList.rule[0]?.selectId);
				if (this.ruleList.rule[0]?.selectId?.length > 0) {
					let data = await this.$http({
						url: this.$api.getUser,
						method: 'POST',
						hideLoading: true,
						needToken: true,
						data: {}
					})
					if (data.code == 200) {
						if (data.data.buy_passwd) {
							this.pwd_show = true
							this.select_show = false
						} else {
							this.tshow = true
						}
					}
				} else {
					this.$u.toast('请选择你要操作的藏品')
				}
			},
			GoPle() {
				this.tshow = false
				uni.navigateTo({
					url: '/pages/save/editpwd'
				})
			},
		},

		filters: {
			formatTime(e) {
				let date = new Date().getTime()
				if (e) {
					date = new Date(e.replace(/-/g, '/')).getTime()
				}
				let newDate = new Date().getTime()
				return date - newDate
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		// min-height: 100vh;
		padding-bottom: 50rpx;
		// background: #000103 url(@/static/images/activities/hd-bg.png)left top no-repeat;
		// background-size: 750rpx 908rpx;

		.header {
			background: #F5F9FF;
			padding: 30rpx;
			&-title {
				// width: 632rpx;
				// height: 92rpx;
				// margin: 0 auto;
				font-size: 28rpx;
				font-weight: 600;
				color: #16172F;
			}

			&-des {
				display: flex;
				align-items: center;
				background: #FFFFFF;
				border-radius: 4rpx;
				padding: 18rpx 20rpx;
				font-size: 24rpx;
				color: #8C93AA;
				margin-top: 10rpx;
				text {
					margin-top: 2rpx;
					margin-left: 10rpx;
				}

				&-time {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-left: 10rpx;

					&-num {
						max-width: 70rpx;
						min-width: 45rpx;
						height: 34rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #FFFFFF;
						padding: 0 4rpx;
						background: #1A1A1A;
						border-radius: 4rpx;
						line-height: 38rpx;

						text {
							font-size: 16rpx;
						}
					}

					&-doc {
						font-size: 24rpx;
						font-weight: 600;
						color: #1A1A1A;
						margin: 0 4rpx;
					}
				}
			}
		}

		.content {
			padding: 30rpx;
			.item {
				padding: 36rpx 0;
				border-bottom: 1rpx solid #E0E6F0;
				.top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					.needCollection {
						font-size: 28rpx;
						font-weight: 600;
						color: #16172F;
					}
					.selectCollection {
						background: #FFFFFF;
						border-radius: 34rpx;
						font-size: 24rpx;
						border: 1rpx solid #979797;
						color: #8C93AA;
						padding: 7rpx 30rpx;
					}
				}
				.footer {
					display: flex;
					flex-wrap: wrap;
					// justify-content: space-around;
					margin-top: 10rpx;
					&-item {
						width: 215rpx;
						height: 316rpx;
						background: #F5F5FA;
						border-radius: 2rpx;
						padding: 10rpx;
						box-sizing: border-box;
						margin: 10rpx 7rpx;
						.img {
							width: 200rpx;
							height: 200rpx;
							image {
								width: 100%;
								height: 100%;
							}
						}
						.info {
							.title {
								font-weight: 600;
								color: #16172F;
								font-size: 26rpx;
							}
							.iden {
								text {
									font-size: 24rpx;
									&:nth-child(1) {
										color: #101010;
									}
									&:nth-child(2) {
										color: #A1A1AB;
									}
								}
							}
						}
					}
				}
				&:last-child {
					border-bottom: none;
				}
			}
		}














		.goods {
			margin-top: 52rpx;

			&-box {
				width: 100%;
				text-align: center;
				// background: url(@/static/images/activities/goods-bg.png)left center no-repeat;
				background-size: 750rpx 484rpx;

				&-image {
					border: 2px solid #EFB23E;
					margin: 0 auto;
					width: 498rpx;
					height: 498rpx;
					border-radius: 60rpx;

					image {
						margin: 20rpx auto;
						width: 458rpx;
						height: 458rpx;
						border-radius: 40rpx;
					}
				}

			}

			&-scenic {
				width: 100%;
				box-sizing: border-box;
				padding: 30rpx 28rpx;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;

				&-top {
					display: flex;
					align-items: center;

					&-bg {
						width: 56rpx;
						height: 100rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					&-title {
						font-size: 32rpx;
						font-weight: 600;
						color: #FFFFFF;
						line-height: 44rpx;
						border-radius: 8rpx;
						border: 4rpx solid rgba(239, 178, 62, 0.2);
						padding: 10rpx 36rpx;
					}
				}

				&-tags {
					font-size: 0;
					margin-top: 14rpx;

					text {
						display: inline-block;
						font-size: 22rpx;
						font-weight: 600;
						color: #FFFFFF;
						padding: 2rpx 8rpx;
						background: #4B4B4C;
						border-radius: 4rpx;
						margin-right: 10rpx;
						margin-bottom: 10rpx;

						&.title {
							margin-right: 0;
							background: #EFB23E;
							color: #181512;
						}
					}
				}

				&-submit {
					width: 358rpx;
					height: 82rpx;
					background: linear-gradient(180deg, #FED792 0%, #FDBA4E 100%);
					box-shadow: 0px 4rpx 8rpx 6rpx rgba(180, 121, 25, 0.4);
					border-radius: 41rpx;
					font-size: 36rpx;
					font-weight: 600;
					color: #000000;
					margin-top: 44rpx;
					margin-bottom: 40rpx;
					border: 0;
				}

				&-tips {
					font-size: 22rpx;
					color: #ABABAB;
				}
			}
		}

		.goods_cont {
			margin: 0 27rpx;
			border-radius: 30rpx;
			border: 4rpx solid #EFB23E;
			// background: url(@/static/images/activities/goods-cont-bg.png)center center no-repeat;
			background-size: 648rpx 260rpx;

			&-title {
				height: 86rpx;
				background: rgba(225, 165, 52, 0.2);
				border-radius: 20rpx 20rpx 0px 0px;
				text-align: center;
				line-height: 86rpx;
				font-size: 24rpx;
				font-weight: 600;
				color: #FDBB50;

				image {
					width: 186rpx;
					height: 58rpx;
					vertical-align: middle;
				}
			}

			&-cont {
				padding: 40rpx 0 40rpx 0;

				&-item {
					position: relative;
					font-size: 0;

					&-image {
						position: relative;

						image {
							background-color: #FFEDC5;
							width: 200rpx;
							height: 200rpx;
							border-radius: 20rpx;
						}

						.number {
							position: absolute;
							right: -10rpx;
							top: -10rpx;
							font-size: 20rpx;
							padding: 2rpx 20rpx;
							border-radius: 20rpx;
							background-color: #EFB23E;
						}
					}

					&-tag {
						width: 68rpx;
						height: 32rpx;
						border-radius: 8rpx;
						font-size: 22rpx;
						font-weight: 600;
						color: #FFFFFF;
						line-height: 32rpx;
						text-align: center;
						background: #EFB23E;
						position: absolute;
						left: 16rpx;
						top: 12rpx;

						&.epic {
							background: linear-gradient(180deg, #F89A72 0%, #EF3E54 100%);
						}

						&.rare {
							background: linear-gradient(180deg, #72B7F8 0%, #6A3EEF 100%);
						}
					}

					&-title {
						width: 200rpx;
						margin: 16rpx 0 22rpx 0;
						font-size: 24rpx;
						font-weight: 600;
						color: #FFFFFF;
						// line-height: 34rpx;
						text-align: center;
					}
				}
			}
		}

		.rule {
			box-sizing: border-box;
			background: rgba(216, 216, 216, 0.1);
			border-radius: 20rpx;
			margin: 50rpx 28rpx 0 28rpx;
			padding: 26rpx;

			&-title {
				font-size: 32rpx;
				text-align: center;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 44rpx;
			}

			&-cont {
				margin-top: 34rpx;
				font-size: 24rpx;
				font-weight: 600;
				color: #ABABAB;
				line-height: 34rpx;
			}
		}

		.friend {
			&-btns {
				margin: 52rpx auto 30rpx auto;
				width: 384rpx;
				height: 52rpx;
				background: linear-gradient(90deg, #FFEDC5 0%, #FCB94D 100%);
				border-radius: 8rpx;
				font-size: 24rpx;
				font-weight: 600;
				color: #000000;
				line-height: 52rpx;
				text-align: center;
			}
		}

		.material {
			width: calc(100vw - 68rpx);
			// background: #1D1D1F;
			border-radius: 30rpx;
			// border: 4rpx solid rgba(255, 203, 0, 0.6);

			&-header {
				height: 107rpx;
				background: rgba(225, 165, 52, 0.2);
				border-radius: 20rpx 20rpx 0px 0px;
				position: relative;

				&-title {
					font-size: 32rpx;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 107rpx;
					text-align: center;
				}

				&-close {
					position: absolute;
					right: 28rpx;
					top: 28rpx;
				}
			}

			.pwd-header-title {
				font-size: 48rpx;
				font-weight: 600;
				// color: #FFFFFF;
				line-height: 66rpx;
				text-align: center;
				margin-top: 78rpx;
			}

			.pwd-cont {
				margin-top: 60rpx;
				margin-bottom: 114rpx;
			}

		}

		.prize {
			width: calc(100vw - 68rpx);
			background: #1D1D1F;
			border-radius: 30rpx;
			border: 4rpx solid rgba(255, 203, 0, 0.6);

			&-close {
				position: absolute;
				right: 42rpx;
				top: 42rpx;
			}

			&-goods-title,
			&-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 44rpx;
				margin: 58rpx 0 36rpx 0;
				text-align: center;
				padding: 0 20rpx;
			}

			&-goods {
				width: 352rpx;
				height: 352rpx;
				border-radius: 50rpx;
				border: 4rpx solid rgba(239, 178, 62, 0.99);
				margin: 0 auto;
				text-align: center;

				image {
					width: 320rpx;
					height: 320rpx;
					background-color: #72B7F8;
					margin-top: 16rpx;
					border-radius: 30rpx;
				}
			}

			&-submit {
				width: 358rpx;
				height: 82rpx;
				background: linear-gradient(180deg, #FED792 0%, #FDBA4E 100%);
				box-shadow: 0px 4rpx 8rpx 6rpx rgba(180, 121, 25, 0.4);
				border-radius: 41rpx;
				font-size: 36rpx;
				font-weight: 600;
				color: #000000;
				margin-top: 44rpx;
				margin-bottom: 40rpx;
				border: 0;
			}
		}
		
		.ntabar{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: calc(100% - 54rpx);
			padding: 26rpx 20rpx 26rpx 35rpx;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 1000;
			background-color: #fff;
			.number {
				font-size: 24rpx;
				color: #8C93AA;
				.count {
					font-size: 36rpx;
					font-weight: bold;
					color: #16172F;
				}
			}
			.mergeBtn {
				.item {
					display: flex;
					align-items: center;
					justify-content: space-around;
					font-weight: 600;
					width: 268rpx;
					height: 68rpx;
					font-size: 28rpx;
					border-radius: 34rpx;
					border: 1rpx solid #979797;
				}
			}
			.price {
				.title {
					font-size: 24rpx;
					color: #8C93AA;
				}
				.price-number {
					color: #16172F;
					font-weight: bold;
					font-size: 48rpx;
				}
			}
			.btn {
				display: flex;
				// justify-content: space-between;
				.item{
					display: flex;
					align-items: center;
					justify-content: space-around;
					width: 268rpx;
					height: 68rpx;
					background: #FFFFFF;
					border-radius: 34rpx;
					border: 1rpx solid #979797;
					font-size: 28rpx;
					color: #16172F;
					&:nth-child(2) {
						margin-left: 10rpx;
					}
				}
			}
			
				.ic1{
					width: 34rpx;
					height: 34rpx;
					margin-right: 10rpx;
				}
				.ic2{width: 34rpx;
				height: 34rpx;
				margin-right: 10rpx;
				}
				.ic3{width: 34rpx;
				height: 34rpx;
				margin-right: 10rpx;
					
				}
				.ic4{
					width: 34rpx;
					height: 34rpx;
					margin-right: 10rpx;
				}
		}
	}
	
.selectBox {
	.header {
		background: #F5F9FF;
		padding: 30rpx;
		&-des {
			display: flex;
			align-items: center;
			.img {
				width: 100rpx;
				height: 100rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.info {
				margin-left: 20rpx;
				.title {
					font-size: 28rpx;
					font-weight: 600;
					color: #16172F;
					margin: 10rpx 0;
				}
				.tips {				
					font-size: 24rpx;	
					color: #8C93AA;
					margin: 10rpx 0;
				}
			}
		}
	}
	.content {
		padding: 30rpx 30rpx 120rpx 30rpx;
		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			border: 1rpx solid #E0E6F0 !important;
			margin: 10rpx 0;
			.left {
				.code {
					font-weight: 600;
					color: #16172F;
					font-size: 28rpx;
				}
				.iden {
					color: #8C93AA;
					font-size: 24rpx;
					margin-top: 10rpx;
				}
			}
			.right { 
				display: flex;
				.price {
					display: flex;
					flex-direction: column;
					margin-right: 20rpx;
					text {
						&:nth-child(1) {
							font-weight: bold;
							color: #16172F;
							font-size: 36rpx;
						}
						&:nth-child(2) {
							color: #8C93AA;
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}
	.ntabar{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 54rpx);
		padding: 26rpx 20rpx 26rpx 35rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 1000;
		background-color: #fff;
		.number {
			font-size: 24rpx;
			color: #8C93AA;
			.count {
				font-size: 36rpx;
				font-weight: bold;
				color: #16172F;
			}
		}
		.btn {
			display: flex;
			// justify-content: space-between;
			.item{
				display: flex;
				align-items: center;
				justify-content: space-around;
				width: 268rpx;
				height: 68rpx;
				background: #FFFFFF;
				border-radius: 34rpx;
				border: 1rpx solid #979797;
				font-size: 28rpx;
				color: #16172F;
				&:nth-child(2) {
					margin-left: 10rpx;
				}
			}
			.unchecked {
				color: #949396 !important;
				border: 1rpx solid #949396 !important;
			}
		}
	}
}
</style>
